<template>
  <div class="page-container">
    <pf-table
      ref="pfTable"
      v-model="form"
      :columns="columns"
      :form-items="formItems"
      @get-table-data="getTableData"
    >
      <template #handle-area>
        <el-button type="primary" @click="addNotice">新增公告</el-button>
      </template>
      <template #handle="{row}">
        <el-button type="text" size="small" @click="showDetail(row)">详情</el-button>
        <el-button type="text" size="small" @click="editHandle(row)">编辑</el-button>
        <el-button type="text" class="danger-text-button" size="small" @click="deleteHandle(row)">删除</el-button>
      </template>
    </pf-table>
    <AddNotice
      v-if="showNotice"
      :form-detail="detail"
      :type="type"
      @close="closeHandle"
      @confirm="confirmHandle"
    />
  </div>
</template>

<script>
import { getNoticeList, deleteNotice } from '@/api/content'
import AddNotice from './AddNotice.vue'

export default {
  name: 'NoticeList',
  components: {
    AddNotice
  },
  data() {
    return {
      type: 'add',
      showNotice: false,
      detail: {},
      form: {},
      loading: false
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '标题', prop: 'title', attrs },
        { label: '阅读次数', prop: 'views', attrs },
        { label: '创建时间', prop: 'createTime', attrs },
        { label: '创建人', prop: 'creator', attrs },
        { label: '操作', slot: 'handle', attrs: { width: '150px', fixed: 'right' }}
      ]
    },
    formItems() {
      return [
        {
          type: 'input',
          label: '标题',
          prop: 'title'
        }, {
          type: 'date',
          label: '创建时间',
          prop: 'dateRange',
          span: 8,
          attrs: {
            type: 'datetimerange'
          }
        }
      ]
    }
  },

  methods: {

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      const [createStartTime = '', createEndTime = ''] = formQuery?.dateRange || []
      const data = {
        pageNo,
        pageSize,
        createStartTime,
        createEndTime,
        ...formQuery
      }
      getNoticeList(data).then(res => {
        this.loading = false
        done({ data: res.data || [], total: res.count || 0 })
      }).catch(() => {
        done({ data: [], total: 0 })
        this.loading = false
      })
    },

    // 新增
    addNotice() {
      this.type = 'add'
      this.detail = {}
      this.showNotice = true
    },

    // 查看详情
    showDetail(row) {
      this.type = 'detail'
      this.detail = row
      this.showNotice = true
    },

    // 编辑
    editHandle(row) {
      this.type = 'edit'
      this.detail = row
      this.showNotice = true
    },

    // 删除
    deleteHandle(row) {
      const formData = new FormData()
      formData.append('id', row.id)
      this.$confirm('确定删除该公告吗?', '提示', {
        type: 'warning'
      }).then(() => {
        deleteNotice(formData).then(() => {
          this.$message.success('删除成功')
          this.$refs.pfTable.getTableData()
        }).catch(() => {})
      }).catch(() => {})
    },

    // 关闭弹窗
    closeHandle() {
      this.showNotice = false
    },

    // 确定
    confirmHandle() {
      this.$refs.pfTable.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped></style>
